<style scoped>
.phone {
  background-color: #f1f1f1;
  padding-right: 20px;
  position: relative;
}
.phoneBox {
 
  overflow: hidden;
  background-color: #fff;
  border-radius: 50px;
  
  height: 810px;
}
.phonewrap{
  height: 810px;
  overflow-y: auto;
  overflow-x: hidden;
  /* margin-right: -20px; */
}
.phoneBottom{
  position: absolute;
  left: 0;
  right: 20px;
  bottom: 0;
  background: #fff;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}
.phoneNav img{
  display: block;
  width: 100%;
}
.liuhai {
  position: absolute;
  width: 60%;
  left: 20%;
  top: 0;
  height: 40px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  background-color: #fff;
  z-index: 50;
  border: 1px solid #f0f3f8;
}
.img {
  width: 100%;
  border-radius: 3px;
}

.center {
  text-align: center;
  color: #6c6c6c;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #eee;
}
.center.active {
  color: #5ba4e9;
}
.wraper {
  padding: 0 20px;
  margin-bottom: 30px;
}

.top {
  margin-bottom: 20px;
  border-top: 1px dashed #cccccc;
}


.fixed-bottom {
  position: absolute;
  bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
  height: 80px;
  line-height: normal !important;
  /* left: 210px; */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  text-align: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.sidehide {
  left: 75px;
}


/* 分页 start */

.page {
  margin: 0;
}

.ivu-page {
  padding-bottom: 150px;
}

.wu.common-box-body .ivu-form-item {
  padding-right: 0;
  margin-bottom: 15px;
}
/* 分页 end */

.policy-manage {
  position: relative;
  height: 810px;
}

.app-status img{
  display: block;
  width: 100%;
}
.app-header{
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  border-bottom: 2px solid #dfdfdf;
}
.app-header-left{
  position: absolute;
  left: 10px;
  top: 8px;
  font-weight: bold;
}
.app-header-right{
  position: absolute;
  right:30px;
  top: 8px;
  font-size: 16px;
}
.app-header-right i{
  margin-right: 10px;
}
.app-header-right i:last-child{
  color: #fd576d;
  margin-right: 0;
}
.iconfont {
  font-size: 18px;
}
.app-header h4{
  text-align: center;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}
.app-fix{
  /* background-color: #dfdfdf; */
}
.app-title{
  background-color: #fff;
  opacity: 0.2;
}
.app-title-left{
  padding: 10px;
  margin-right: 90px;
}
.app-title-right{
  padding-top: 20px;
  padding-right: 20px;
  width: 90px;
  float: right;
}
.app-title-left h3{
  font-size: 14px;
}
.app-title-left  p{
  font-size: 12px;
}
.app-attr{
  opacity: 0.2;
  background-color: #fff;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 10px;
}
.app-attr h3{
  font-size: 16px;
  margin-bottom: 10px;
}
.feature-title{
  text-align: center;
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #dfdfdf;
}
.feature-content{
  padding-left: 15px;
  padding-top: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e3e3e3;
}
.feature-content-title{
  color: #fd576d;
}
.app-pro-title{
  opacity: 0.2;
  text-align: center;
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #dfdfdf;
}
.app-pro-btn{
  opacity: 0.2;
  width: 90%;
  margin: 10px auto;
  background-color: #ee3f14;
  color: #fff;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
}
</style>

<template>
    <div>
        <Row>
            <i-col span="6" class="phone">
                <div class="phoneBox" >
                  <div class="phonewrap">
                    <div>
                      <div class="liuhai"></div>
                      <div class="app-status">
                        <img src="../../asset/img/status_bar.png" />
                      </div>
                      <div class="app-header">
                        <i class="icon iconfont icon-fanhui app-header-left"></i>
                        <h4>产品详情</h4>
                        <div class="app-header-right">
                          <i class="icon iconfont icon-shoucang"></i>
                          <i class="icon iconfont icon-fenxiang-copy"></i>
                        </div>
                      </div>
                      <div class="app-fix">
                        <div class="app-title">
                          <div class="app-title-right">
                            <img src="../../asset/img/pcom_logo.jpg" />
                          </div>
                          <div class="app-title-left">
                            <h3>孝心保老年防癌保险</h3>
                            <p>阅读量:32</p>
                          </div>                          
                        </div>
                        <div class="app-attr">
                          <h3>
                            投保条件
                          </h3>
                          <Row>
                            <Col span="12">
                              承保年龄：45-80周岁
                            </Col>
                            <Col span="12">
                              保险期间：1年
                            </Col>
                            <Col span="12">
                              保险金额：50万
                            </Col>
                            <Col span="12">
                              保险区域：中国大陆区域
                            </Col>
                          </Row>
                        </div>
                        <div class="app-pro-feature">
                          <div class="feature-title">
                            产品特色
                          </div>
                          <div class="feature-content" v-for="item in tablepro" :key="item.key">
                            <div class="feature-content-title">
                              <i class="icon iconfont icon-rongyu"></i>
                              {{item.key}}
                            </div>
                            <div class="feature-content-cn">
                               {{item.val}}
                            </div>
                          </div>  
                        </div>
                        <div class="app-pro-title"> 
                          保险责任
                        </div>
                        <div class="app-pro-title"> 
                          保险条款
                        </div>
                        <div class="app-pro-btn">
                          制作计划书
                        </div>
                      </div>
                    </div>
                  </div>
                  
                </div>
                <div class="phoneBottom">
                  <Row>
                      <i-col span="6" class="center active">首页</i-col>
                      <i-col span="6" class="center">产品</i-col>
                      <i-col span="6" class="center">发现</i-col>
                      <i-col span="6" class="center">我的</i-col>
                  </Row>
                </div>
            </i-col>
            <i-col span="18">
                    <div class="policy-manage">
                        <productTitle></productTitle>
                        
                        <div class="wraper">
                            <Tabs type="card"  :animated="false">
                                <TabPane label="产品特色" name="pro">
                                    <div class="pro-con-f common-box-body">
                                        <Row>
                                          <Col span="24" class="table-action" >
                                              <Button v-if="$isShow('app_recomment/create')" type="success" size="large" @click="openProModal" class="fr" icon="plus" >新增产品特色</Button>
                                          </Col>
                                        </Row>
                                    </div>
                                    <div class="detail">
                                        <div class="clearfix">
                                            <div class="table-theme highlight_table">
                                                <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns2" :data="tablepro" class=""></Table>
                                            </div>                        
                                        </div>
                                    </div>
                                </TabPane>
                            </Tabs>                                
                        </div>
                        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
                            <Row class="pro-pagesize">
                                <Col :md="24" :lg="16">
                                    <Button v-if="$isShow('app_recomment/update')" type="primary" :disabled="tableaction"  size="large" class="fl mr10" @click="proUpdate">编辑</Button>
                                    <Button v-if="$isShow('app_recomment/del')" type="error" :disabled="tableaction"  size="large" class="fl mr10 " @click="proDel">删除</Button>
                                    <Button type="primary"  size="large" class="fl mr10 " @click="fanhui">返回</Button>
                                </Col>
                            </Row>
                        </div>                      
                    </div>
            </i-col>
        </Row>
        <Modal v-model="proModal" title="推荐险种" okText="提交" :loading="modalLoading5" @on-ok="proSubmit" @on-cancel="proBack" width="500" :mask-closable = 'false' :closable = "false" class="lunbo">
            <div class="common-box-body wu" >
                <Form :model="proForm" ref="proForm">
                    <Row>
                        <i-col span="24">
                            <FormItem label="排序">
                              <!-- <i-input v-model="proForm.px"   placeholder="请输入排序"></i-input> -->
                              <InputNumber placeholder="请输入排序" :min="1" v-model="proForm.px"></InputNumber>
                            </FormItem>
                        </i-col>
                        <i-col span="24">
                            <FormItem>
                              <i-input :disabled="canEdit" v-model="proForm.key"   placeholder="请输入标题名称"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col span="24">
                            <FormItem> 
                              <i-input v-model="proForm.val" type="textarea" :autosize="{minRows: 3,maxRows: 5}"  placeholder="请输入说明"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>                                                                    
                </Form>
            </div>
        </Modal>
    </div>
   
</template>
<script>
import productTitle from "../../components/productTitle";
import VueCropper from "vue-cropper";
import { getStsTokenWrite, getStsTokenRead } from "../../api/common";
import { create, get_list , update, get_detail,del,putaway, getAll , get_id} from '../../api/banner'
import { app_layout_store,appGetList} from '../../api/app_layout'
import { getComlistall } from '../../api/parter'
import { getListByCom } from '../../api/product'
import { app_pro_repository_add_special , app_pro_repository_get_special , app_pro_repository_update_special , app_pro_repository_del_special} from '../../api/app_pro_repository'
export default {
  data() {
    return {
      leftRecPro:[],
      recomtag:0,
      proModal:false,
      proForm:{
        px:1
      },
      canEdit:false,
      recProList:[],
      recommendProlist:[],
      is_module:false,
      bannerList:[],
      appList:[],
      carousel_index:0,
      value1: 1,
      page: 1,
      pagesize: 10,
      listTotal: 0,
      modalLoading1: true,
      modalLoading3: true,
      modalLoading5: true,
      loading: true,
      searchForm: {
        p: 1,
        pagesize: 10,
      },
      modal1: false,
      modal2: false,
      modal3: false,
      form: {
        name: "",
        type: "",
        pid: "",
        px: 0,
        status: "1",
        pic: ""
      },
      proloading: false,
      tableloading: true,
      tableaction: true,
      currentRow: {},
      columns2:[
        {
          title: "排序",
          key: "px",
          width: "80",
          align: "center"
        },
        {
          title: "标题名称",
          key: "key",
          align: "center"
        },
        {
          title: "说明",
          key: "val",
          align: "center",
        },
      ],
      tabtag:'banner',
      tablepro:[],
      policylist: [],
      pidList: [],

      formValidate: {
        name: [
            { required: true, message: '名称不能为空', trigger: 'blur,change' }
        ],
        type: [
            { required: true, message: '类型不能为空', trigger: 'blur,change' }
        ],
        pid: [
            { required: true, message: '关联不能为空', trigger: 'blur,change' }
        ],
        status:[
            { required: true, message: '状态不能为空', trigger: 'blur,change' }
        ]
      },
      //首页模块
      modal5:false,
      form5:{
          position:'',
          pid:'',
          pic_url:'',
      },
      formValidate5: {},
    };
  },
  components: {
    productTitle,
    VueCropper
  },
  computed: {
    slidetoggle() {
      return this.$store.state.sildeshow;
    }
  },
  mounted() {
    this.getRecomPro();
  },
  methods: {

    //更新推荐险种
    proUpdate(){
      this.canEdit = true
      this.proForm = this.currentRow
      this.proModal = true
      this.recomtag = 1
    },
    proDel(){
      this.$Modal.confirm({
        title: "提示",
        content: "是否要删除该条信息?",
        onOk: () => {
          let _params = {
            id:this.$route.params.id,
            key:this.currentRow.key,
          }
          new Promise((resolve, reject) => {
            app_pro_repository_del_special(_params)
              .then(response => {
                if (response.data.err == 0) {
                    this.getRecomPro()
                } else {
                  this.$Message.error(response.data.info);
                  
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
        }
      });
    },
    pidChange(item){
      if(item.label){
        this.proForm.pname = item.label
      }
    },
    getRecomPro(){
      this.tableloading = true
      let _params = {
        id:this.$route.params.id
      }
      new Promise((resolve, reject) => {
        app_pro_repository_get_special(_params)
          .then(response => {
            if (response.data.err == 0) {
                this.tablepro = response.data.data
            } else {
              this.$Message.error(response.data.info);
              
            }
            this.tableloading = false
            resolve();
          })
          .catch(error => {
            reject(error);
          });
          this.tableloading = false
      });
      
    },
    getPro(id){
      if(id){
        let _params = {
          cid:id
        }
        new Promise((resolve, reject) => {
          getListByCom(_params)
            .then(response => {
              if (response.data.err == 0) {
                this.recommendProlist = response.data.data
              } else {
                this.$Message.error(response.data.info);
                
              }
              resolve();
            })
            .catch(error => {
              reject(error);
            });
        });
      } 
    },
    //改变供应商
    changeCid(value){
      this.getPro(value)
    },

    proSubmit(){
      this.proForm.id = this.$route.params.id
      if(this.recomtag == 0){
        new Promise((resolve, reject) => {
          app_pro_repository_add_special(this.proForm)
              .then(response => {
                if (response.data.err == 0) {
                    this.$Message.success(response.data.info);
                    this.proModal = false  
                    this.$refs['proForm'].resetFields();
                    this.proForm = {
                      px:1
                    }
                    this.getRecomPro()
                } else {
                  this.$Message.error(response.data.info);
                  setTimeout(() => {
                      this.modalLoading5 = false
                  }, 2000);
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
      }else{
        this.proForm.id = this.$route.params.id
        new Promise((resolve, reject) => {
          app_pro_repository_update_special(this.proForm)
              .then(response => {
                if (response.data.err == 0) {
                    this.$Message.success(response.data.info);
                    this.proModal = false  
                    this.$refs['proForm'].resetFields();
                    this.proForm = {
                      px:1
                    }
                    this.getRecomPro()
                } else {
                  this.$Message.error(response.data.info);
                  setTimeout(() => {
                      this.modalLoading5 = false
                  }, 2000);
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
      }     
    },
    proBack(){

    },
    openProModal(){
      this.canEdit = false
      this.recomtag = 0
      this.proModal = true
      this.$refs['proForm'].resetFields();
    },



    //时间转换
    datachange(date, obj, param) {
      obj[param] = date;
    },
    tableCurrentChange(currentRow, oldCurrentRow) {
      console.log(currentRow)
      this.tableaction = false;
      this.currentRow = currentRow;
    },

    // 页码改变
    pageChange(page) {
      this.page = page;
      this.getRecomPro();

      
    },
    // 每页条数改变
    pageSizeChange(pagesize) {
      this.pagesize = pagesize;
      this.getRecomPro();
    },
    fanhui(){
      history.go(-1);
    }
  }
};
</script>

